import React, { useEffect, useState } from 'react'
import ellipsis from '../../../assets/images/ellipsis.png'
import left_arrow from '../../../assets/images/left_arrow.png'
import { useHistory } from 'react-router-dom';
import thumbs_up from '../../../assets/images/thumbs-up.png'
import thumbs_up_active from '../../../assets/images/thumbs-up_active.png'
import share from '../../../assets/images/share.png'
import comment from '../../../assets/images/comment.png'
import './DetailTop.css'


const DetailTop = (props) => {
    // console.log(props,'detail');
    const { songSheetDetail={} }=props
    const {coverImgUrl,name,subscribers,creator,description,playCount,subscribedCount,commentCount} = songSheetDetail
    // const {avatarUrl,nickname} = creator
    const history = useHistory()
    const gotoDetail = () => {
        // console.log(history,'history')
        history.push(`/home/main`)
    }
    let [isThumb,setIsThumb] =useState(true)
    // console.log(songSheetDetail);
    
    return (
        // <div className='loading'></div>
    <div className="list_main" >
        {
            songSheetDetail["id"]?
            <div>
                <div className="list_bgi" style={{backgroundImage:`url(${coverImgUrl})`}}><div className='background-filter'>

                </div></div>
                <div className="listTop">
                    <div className="arrow_left" onClick={gotoDetail}>
                        <img src={left_arrow} alt="" />

                    </div>
                    <div className="list_name_sheet">
                        <span>歌单</span>
                    </div>
                    <div className="ellipsis_list_sheet">
                        <img src={ellipsis} alt="" className='ellipsis_pic'/>
                    </div>
                </div>
                <div className="introduction">
                    <div className="introduction_left">
                        <div className="cover_img">
                            <img src={coverImgUrl} alt="" className='avatar_sheet'/>
                        </div>
                    </div>
                    <div className="introduction_right">
                        <div className="sheet_name_list">
                            {
                                name
                            }
                        </div>
                        <div className="author">
                            <div className="author_pic">
                                    <img src={creator.avatarUrl} alt="" className='author_pic' />

                            </div>
                            <div className="author_name">
                                    {
                                        creator.nickname
                                    }
                            </div>
                        </div>
                        <div className="description">
                                    <span> 简介：{
                                            description
                                        }</span>
                        </div>
                    </div>
                    
                </div>
                <div className="footer">
                    <div className="thumbs_up" onClick={setIsThumb.bind(this,!isThumb)}>
                        <img src={isThumb?thumbs_up:thumbs_up_active} alt="" className='thumbs_up_pic'/>
                        <div className="thumbs_up_num">
                                {
                                    (subscribedCount/10000).toFixed(2)
                                }万人
                        </div>
                    </div>
                    <div className="comment">
                        <img src={comment} alt="" className='comment_pic'/>
                        <div className="comment_num">
                                {
                                    commentCount
                                }
                        </div>

                    </div>
                    <div className="share">
                        <img src={share} alt="" className='share_pic'/>
                        <div className="share_word">
                                分享
                        </div>

                    </div>
                </div>
            </div>
            :<></>
        }
       
        </div>
    
    )
}

export default DetailTop